<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="../assets/styles/15.1/index.css">
    </head>
    <body>
        <div class="slider-wrap">
            <div class="slider">
                <ul class="slider-list">
                    <li class="slider-item active">
                        <a href="javaScript:void(0);">
                            <img src="../assets/img/15.1/1.jpg" alt="">
                        </a>
                    </li>
                    <li class="slider-item">
                        <a href="javaScript:void(0);">
                            <img src="../assets/img/15.1/2.jpg" alt="">
                        </a>
                    </li>
                    <li class="slider-item">
                        <a href="javaScript:void(0);">
                            <img src="../assets/img/15.1/3.jpg" alt="">
                        </a>
                    </li>
                    <li class="slider-item">
                        <a href="javaScript:void(0);">
                            <img src="../assets/img/15.1/4.jpg" alt="">
                        </a>
                    </li>
                    <li class="slider-item">
                        <a href="javaScript:void(0);">
                            <img src="../assets/img/15.1/5.jpg" alt="">
                        </a>
                    </li>
                    <li class="slider-item">
                        <a href="javaScript:void(0);">
                            <img src="../assets/img/15.1/6.jpg" alt="">
                        </a>
                    </li>
                </ul>
            </div>
            <div class="thumbs">
                <ul class="thumbs-list">
                    <li class="thumb-item cur">
                        <a href="javaScript:void(0);">
                            <img src="../assets/img/15.1/1.jpg" alt="">
                        </a>
                    </li>
                    <li class="thumb-item">
                        <a href="javaScript:void(0);">
                            <img src="../assets/img/15.1/2.jpg" alt="">
                        </a>
                    </li>
                    <li class="thumb-item">
                        <a href="javaScript:void(0);">
                            <img src="../assets/img/15.1/3.jpg" alt="">
                        </a>
                    </li>
                    <li class="thumb-item">
                        <a href="javaScript:void(0);">
                            <img src="../assets/img/15.1/4.jpg" alt="">
                        </a>
                    </li>
                    <li class="thumb-item">
                        <a href="javaScript:void(0);">
                            <img src="../assets/img/15.1/5.jpg" alt="">
                        </a>
                    </li>
                    <li class="thumb-item">
                        <a href="javaScript:void(0);">
                            <img src="../assets/img/15.1/6.jpg" alt="">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        
        
        <script type="text/javascript">
            // var thumbItem = document.getElementsByClassName('thumb-item')
            // var sliderItem = document.getElementsByClassName('slider-item')
            
            // for(var i = 0; i < thumbItem.length; i++){
            //     (function(j){
            //         thumbItem[j].onclick = function(){
            //             for(var k = 0; k < thumbItem.length; k++){
            //                 thumbItem[k].className = 'thumb-item'
            //                 sliderItem[k].className = 'slider-item'
            //             }
            //         }
            //         this.className += ' cur'
            //         sliderItem[j].className += ' active'
                    
            //     })(i)
            // }
            
            // 插件形式
            
            ;(function(){
                var Slider = function(opt){
                    this.sliderItem = document.getElementsByClassName(opt.sliderItem)
                    this.thumbItem = document.getElementsByClassName(opt.thumbItem)
                    
                    this.bindClick()
                }
                
                Slider.prototype = {
                    bindClick: function(){
                        var slider = this.sliderItem
                        var thumbs = this.thumbItem
                        
                        for(var i = 0; i < thumbs.length; i++){
                            (function(j){
                                thumbs[j].onclick = function(){
                                    console.log(1)
                                    for(var k = 0; k < thumbs.length; k++){
                                        thumbs[k].className = 'thumb-item'
                                        slider[k].className = 'slider-item'
                                    }                                    
                                    this.className += ' cur'
                                    slider[j].className += ' active'
                                }                               
                            })(i)
                        }
                    }
                }
                
                window.Slider = Slider
            })()
            
            var slider = new Slider({
                sliderItem: 'slider-item',
                thumbItem: 'thumb-item'
            })
            
        </script>
    </body>
</html>
